<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Mootools-Form-Validator Example</title>

    <link type="text/css" rel="stylesheet" href="styles/screen.css" />
    <script type="text/javascript" src="scripts/mootools-1.2-core.js"></script>
    <script type="text/javascript" src="scripts/validator-2.0.js"></script>
    <!--script type="text/javascript" src="scripts/mootools-1.11.js"></script>
    <script type="text/javascript" src="scripts/validator-1.0.js"></script-->

</head>
<body>

<form id="f-example" name="f-example" action="#">
    
    <label for="u_email">What's Your Email Address?</label>
    <input type="text" value="" name="u_email" id="u_email" />

    <label for="u_select">What Platform Do You Prefer?</label>
    <select id="u_select" name="u_select">
        <option />
        <option>Windows</option>
        <option>MacOS</option>
        <option>*NIX</option>
    </select> 

    <label for="u_opts">What is Your Primary Programming Language?</label>
    <div id="u_opts" class="mb radio">
        <label><input type="radio" name="u_radio" value="php" />PHP</label>
        <label><input type="radio" name="u_radio" value="net" />.NET</label>
        <label><input type="radio" name="u_radio" value="python" />Python</label>
        <label><input type="radio" name="u_radio" value="ruby" />Ruby</label>
        <label><input type="radio" name="u_radio" value="other" />Other</label>
    </div> 

    <label for="u_multi">What Browsers Do You Typically Test For?</label>
    <select id="u_multi" name="u_multi" multiple="multiple">
        <option>Firefox</option>
        <option>Internet Explorer</option>
        <option>Opera</option>
        <option>Mozilla</option>
        <option>Safari</option>
        <option>Camino</option>
        <option>Flock</option>
        <option>SeaMonkey</option>
        <option>Lynx</option>
        <option>Other</option>
    </select>

    <label for="u_checkbox" class="mb">Please Check the Following Box: <input type="checkbox" id="u_checkbox" name="u_checkbox" value="checked" class="inline" /></label>

    <input type="submit" value="submit" name="submit" id="submit" />
 
</form>

<script type="text/javascript">
var vform = new Validator('f-example',{fields:{
    'u_email': {
        pattern: Array('VALID_NOT_EMPTY','VALID_EMAIL'),
        response: Array('Please enter your email address.','Please enter a valid email address.')
    },
    'u_select': {
        pattern: Array('VALID_NOT_EMPTY'),
        response: Array('Please select your preferred platform.')
    },
    'u_opts': {
        pattern: Array('VALID_NOT_EMPTY'),
        response: Array('Please select your primary programming language.')
    },
    'u_multi': {
        pattern: Array('VALID_NOT_EMPTY'),
        response: Array('Please select which browsers you typically test for.') 
    },
    'u_checkbox': {
        pattern: Array('VALID_NOT_EMPTY'),
        response: Array('Please check the checkbox.') 
    }
}});
</script>

</body>
</html>
